<template>
    <div class="wallet_table">
        <div class="content" v-loading="pageData.loading">
            <!-- {{ pageData }} -->
            <template v-if="pageData.list.length > 0 && userStore.user.bank != 0">
                <el-scrollbar height="100%">
                    <div class="list">
                        <div class="item" v-for="item in pageData.list" :key="item.id">
                            <div class="detail">
                                <div class="title" style="display: flex">{{ item.message.type_lang.zh ? `${item.message.type_lang.zh}：` : '' }}{{
                                    item.from_token }} - {{
                                        item.to_token }} {{ item.create_at || '--' }}</div>
                                <div class="items" style="margin-top: 4px">
                                    <div style="width: 53%;"> {{ item.message.log || '--' }}</div>
                                    <div style="width: 15%;">{{ item.message.pk_odds_key_ch || '--' }}</div>
                                    <div style="width: 15%;">注单：{{ item.message.place_stake || '--' }}</div>
                                    <div class="energy">
                                        <div class="label">能量币:</div>
                                        <div class="value" :style="stylecolor(item.type)">￥{{ item.trans_amount.toFixed(2) }}</div>
                                    </div>
                                </div>
                            </div>
                            <!-- <div class="energy">
                                <div class="label">能量币:</div>
                                <div class="value" :style="stylecolor(item.type)">￥{{ item.trans_amount }}</div>
                            </div> -->
                        </div>
                    </div>
                </el-scrollbar>
            </template>

            <template v-else>
                <app-none :size="120">
                </app-none>
            </template>
        </div>
        <div class="footer">
            <el-pagination v-model:current-page="pageData.page" v-model:page-size="pageData.pageSize" :size="size"
                :disabled="disabled" :background="background" layout="prev, pager, next" :total="pageData.total"
                @size-change="pageActions.handleSizeChange" @current-change="pageActions.handlePageChange" />
        </div>
    </div>
</template>

<script setup>
import { http } from '@/utils/uc-http'
const userStore = useUserStore()
const { pageData, pageActions, dialog } = usePage(
    () => {
        const query = {
            page: pageData.page,
            page_size: pageData.pageSize,
            ...pageData.query,
        }

        return http.post('/blance_bank_detail', query)
    },
    {
        query: {
            // id: userStore.user.uid
        }
    }
)

const stylecolor = (value) => {
    let str = ''
    if (value == 'in') {
        str = 'color: #02a66e;'
    } else {
        str = 'color: #fb445f;'
    }
    return str
}
const refresh = () => {
    pageActions.refresh(true)
}
defineExpose({
    refresh
});
</script>

<style lang="scss" scoped>
.wallet_table {
    height: calc(100% - 200px);
    border: solid 1px #ebebeb;
}

.content {
    width: 100%;
    height: calc(100% - 44px);
}

.footer {
    width: 100%;
    height: 44px;
}

.list {
    display: flex;
    flex-direction: column;

    .item {
        width: 100%;
        height: 68px;
        border-bottom: 1px solid #ebebeb;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;

        .detail {
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 100%;

            .title {
                font-size: 12px;
                font-weight: 600;
                color: #333;
            }

            .items {
                margin-top: 8   px !important;
                display: flex;
                justify-content: space-between;
                font-size: 14px;
                color: #8a8a8a;

                div{
                    display: flex;
                    align-items: center;
                }

            }
        }

        .energy {
            display: flex;
            width: 20%;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            align-items: center;
            padding-left: 30px;

            .label {
                width: 100%;
                font-size: 14px;
                color: #333;
                text-align: left;
            }

            .value {
                width: 100%;
                font-size: 16px;
                font-weight: bold;
                color: #fb445f;
                margin-left: 4px;
                text-align: left;
            }
        }
    }
}

.wallet_table .footer {
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>

<style>
.wallet_table .footer .number {
    font-size: 14px;
    font-weight: bold;
    color: #252a30;

    width: 28px;
    min-width: 28px;
    height: 28px;
    line-height: 28px;
    border-radius: 0;
}

.wallet_table .footer .is-active.number {
    background-color: #ff7900;
    color: #fff;
}
</style>